<template>
  <div style="display: flex;">
    <el-form-item  label="日志搜索：">
      <div style="display: flex;">
        <el-input v-model="findparams.keyword" placeholder="输入操作详情/请求IP/用户ID/进行查询"></el-input>
        <el-button @click="getTableData" style="margin-left: 10px;">搜索</el-button>
      </div>
    </el-form-item>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;">
    <el-table-column prop="content" label="操作详情" width="auto"/>
    <el-table-column prop="time" label="操作时间" width="auto" />
    <el-table-column prop="userId" label="用户ID" width="auto" />
    <el-table-column prop="ip" label="请求IP" width="auto" />
  </el-table>
    <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
const options = ref([])
let tableData = ref({})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 16
})
const findparams = reactive({
  keyword:null
})
// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  if(findparams.keyword != null){
    params.keyword = findparams.keyword
  }
  get("/consumptionLogs/list" ,params,content => {
    tableData.value = content
  })
}

</script>

<style scoped lang='scss'>

</style>